<script setup lang="ts">
import type { EChartsOption } from 'echarts'

const props = withDefaults(
  defineProps<{
    data?: any[]
  }>(),
  {
    data() {
      const rand = () => +(Math.random() * 100).toFixed(2)
      return [
        { name: '计量器具故障', value: rand() },
        { name: '网关采集故障', value: rand() },
        { name: '实时测点异常', value: rand() },
        { name: '统计指标异常', value: rand() },
      ]
    },
  },
)

const chartOption = computed<EChartsOption>(() => {
  return {
    title: {
      text: '报警类型占比',
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal',
      },
    },
    tooltip: {
      show: true,
      formatter: '{b}：{c}（{d}%）',
    },
    legend: {
      show: true,
      top: 'middle',
      right: '10%',
      orient: 'vertical',
    },
    series: [
      {
        type: 'pie',
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        radius: '60%',
        center: ['35%', '50%'],
        data: props.data,
      },
    ],
  }
})
</script>

<template>
  <BChart :option="chartOption" />
</template>
